$(function (){




    var newHtml = '<ul><li>One</li> <li>Two</li> <li>Three</li> </ul>';
    $('body').append(newHtml);
//load
    $('#header').load('header.html .headerComponent');

    //$('#loginBtn').length -- 0

    $('#loginBtn').click(function(){
     // will work
    });
    //ajax
    //load

    $('#mainContainer').load('mainContent.html #mainComponent',function(){
       // alert('main Component is called');
        //what you can do here, why is this call back function helpful
        // inorder to perform some logic after this is loaded
        // events
       //
        $('#loginBtn').click(function(){
            //will work
        });

    });
 // 1 or 0, -- 0
    //
    $('#loginBtn').click(function(){
      // will work
    });

    //1,2,3,4 -- synchronous -- 4
    //1,2,3,4 -- 1, 2, 3,4 -- 4,2,3,1 -- asynchronous




});